import { FC, useContext } from "react";
import styles from "./index.module.scss";
import { getSongUrl } from "@/api/common/index";

import { playMusicDispatchContext } from "@/reducers/playMusic";
interface It {
  name: string;
  id: number | string;
}
interface IProps {
  data: It[];
  title: string | undefined;
}
const SearchList: FC<IProps> = ({ data, title }) => {
  const dispatch = useContext(playMusicDispatchContext);

  const playMusic = (it: playList) => {
    palySong(it);
  };
  const palySong = async (it: playList) => {
    const url = await getSongUrl(it.id);
    if (!url) {
      alert("暂无版权");
      return;
    }
    dispatch({
      type: "PLAY",
      paLoad: {
        keepOrder: false,
        musicUrl: url,
        musicId: it.id,
        picUrl: it.picUrl,
        musicName: it.name,
        song: it.songName,
        autoPlay: true,
      },
    });
  };
  return (
    <div className={styles.SearchList}>
      <div className={styles.SearchListTitle}>搜索 ”{title}“</div>
      {data.map((it, index) => {
        return (
          <div
            className={styles.searchItem}
            key={index}
            onClick={() => playMusic(it)}
          >
            <div className={styles.icon}>
              <svg
                viewBox="0 0 1049 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
              >
                <path d="M1013.526731 947.650028l-225.765729-220.400182a425.116456 425.116456 0 0 0 99.174185-272.876416 443.512619 443.512619 0 1 0-443.394694 432.899448 448.111659 448.111659 0 0 0 279.421204-96.815703l225.76573 220.459144a46.63899 46.63899 0 0 0 64.858266 0 44.044659 44.044659 0 0 0 0-63.266291z m-919.808143-493.453484a350.175677 350.175677 0 0 1 700.115506 0 336.083745 336.083745 0 0 1-93.690714 232.664291 196.343661 196.343661 0 0 1-18.101353 17.688618 353.064818 353.064818 0 0 1-238.265686 91.450155 345.930409 345.930409 0 0 1-349.998791-341.97995z m0 0"></path>
              </svg>
            </div>
            <div className={styles.name}>{it.name}</div>
          </div>
        );
      })}
    </div>
  );
};

export default SearchList;
